<template>
	<hyb-page :title="yg_list_title">

		<template v-slot:top>
			<view class=" gui-padding-small gui-bg-white gui-flex gui-align-items-center">
				<view style="width: 200rpx;">
					<hyb-city :onlyRegion="true" v-model="y_address"></hyb-city>
				</view>

				<view style="width: 200rpx;" v-if="juese != 'paidan'">
					<hyb-fenlei @change="fenleiChange" show-all :type="1" placeholder="技能"></hyb-fenlei>
				</view>
				<view class="gui-flex1 gui-flex gui-align-items-center gui-bg-white gui-border gui-bg-gray"
					style="padding: 10rpx 16rpx;border-radius: 40rpx;">
					<input class="gui-flex1 gui-text gui-text-small" v-model="search" style="margin-left: 10rpx;"
						placeholder="请输入搜索" />
					<text @tap="query(1)" class="gui-block gui-color-white  gui-text-small"
						style="margin-left: 10rpx;padding: 5rpx 16rpx; border-radius: 40rpx;"
						:style="{background:base.qjcolor}">搜索</text>
				</view>
			</view>
		</template>
		<template v-slot:body>userinfo.u_thumb?userinfo.u_thumb:$store.state.base.erweima
			<view style="height: 70rpx;"></view>
			<view class="gui-padding" v-if="tag==1">
				<view class="gui-list-items gui-bg-white gui-padding-x gui-border-radius-large gui-margin-top"
					v-for="(item,index) in list" :key="index">
					<gui-image :width="130" :height="130" mode="aspectFit" style="border-radius: 10rpx;"
						:src="item.y_thumb||$store.state.base.yg_set.yg_lb_tu"
						 class="js-icon">
					</gui-image>
					<view class="gui-list-body">
						<view class="gui-list-title">
							<view class="gui-text gui-primary-text gui-ellipsis"
								:class="tag==0?['gui-flex','gui-space-between','gui-flex1']:''">
								<text>{{item.y_name}}</text>
								<text class="gui-text-small gui-color-grey2 bold gui-margin-left"
									v-if="item.distance != null">距离{{item.distance}}km</text>
							</view>
						</view>

						<view class="gui-margin-top-small">
							<text class="gui-color-gray gui-text-small ">已接{{item.fw_count}}单</text>
						</view>
						<view class="gui-list-body-desc gui-margin-top-small">
							<view class="gui-flex gui-row gui-nowrap gui-align-items-center  gui-flex1">
								<view class="gui-flex gui-align-items-center  gui-flex1">
									<gui-star :activecolor="base.qjcolor" fontSize="30rpx" :totalstars="5" :starnum="5"
										:cantap="false"></gui-star>


									<text class="gui-badge  gui-bg-red gui-color-white gui-text-small"
										v-if="tag==0">好评5</text>
								</view>

							</view>
						</view>

					</view>

					<view class="gui-flex gui-column gui-space-between" v-if="tag==1">
						<view class="js-status gui-text-small gui-text-center gui-border-radius">可约</view>
						<view @tap="choose(item)"
							class="jis-select gui-bg-red gui-color-white gui-text-center gui-text gui-border-radius gui-margin-top"
							style="padding: 5rpx 16rpx;">选择TA</view>
					</view>


				</view>
			</view>


			<view class="gui-padding gui-margin-top-middle " style="padding: 10rpx;margin-top: -28rpx;" v-else>
				<view class="gui-list-items gui-bg-white gui-padding gui-border-radius-large gui-margin-top-middle"
					:style="{height:$store.state.base.show_base.yg_tx ? '280rpx':'250rpx'}" v-for="(item,index) in list"
					:key="index" @click="to(item.y_id)">
					<image v-if="$store.state.base.show_base.yg_tx"
						style="width: 130rpx;height: 150rpx;border-radius: 10rpx;" mode="aspectFill"
						:src="item.y_thumb||$store.state.base.yg_set.yg_lb_tu">
					</image>

					<image v-else style="width: 190rpx;height: 260rpx;border-radius: 10rpx;" mode="aspectFill"
						:src="item.y_thumb||$store.state.base.yg_set.yg_lb_tu">
					</image>
					<view class="gui-list-body">
						<view class="gui-list-title">
							<view class="gui-text gui-primary-text gui-ellipsis"
								:class="tag==0?['gui-flex','gui-space-between','gui-flex1']:''">
								<text>{{item.y_name}}</text>
								<view>{{item.y_styles}}</view>
								<text class="gui-text-small gui-color-grey2 bold gui-margin-left"
									v-if="item.distance != null">距我{{item.distance}}km</text>
							</view>
						</view>
						<view class="gui-list-body-desc gui-margin-top">
							<view class="gui-flex gui-row gui-nowrap gui-align-items-center  gui-flex1">
								<view>好评：</view>
								<gui-star :activecolor="base.qjcolor" fontSize="30rpx" :totalstars="5" :starnum="5"
									:cantap="false"></gui-star>
							</view>

							<view
								class="gui-flex gui-row gui-nowrap gui-align-items-center  gui-flex1 gui-margin-top-middle"
								v-if="item.y_jinengs">
								<view class="gui-flex-shrink0">技能：</view>
								<gui-tags :key="index2" :size="20" v-for="(jineng,index2) in item.y_jinengs.slice(0,2)"
									:text="jineng.xt_name"
									:customClass="['gui-bg-gray','gui-color-black','gui-ellipsis']"></gui-tags>
							</view>

							<view
								class="gui-flex gui-row gui-nowrap gui-align-items-center gui-space-between  gui-flex1 gui-margin-top-middle"
								v-if="item.y_jinengs">
								<view>服务人数：{{item.fw_count}}</view>
								<view class="gui-flex gui-space-between" v-if="juese=='dl' || juese=='sj' || juese=='manage' ">
									
									<!-- 	<view @tap.stop="pass(item,'暂停接单')" class="gui-color-blue1"
										    v-if="item.y_styles == '审核通过' && (item.y_typs == '空闲中' || item.y_typs == '服务中') ">
										    暂停接单</view> -->

									<!-- <view @tap.stop="call(item)" v-if="this.$store.state.base.yg_set.y_call" class="gui-color-blue1 gui-margin-left">电话1联系</view> -->

									<!-- 暂时隐藏设置为请假中功能 -->
									<!-- <view @tap.stop="pass(item,'暂停接单')" class="gui-color-blue1"
                                        v-if="item.y_styles == '审核通过' && (item.y_typs == '空闲中' || item.y_typs == '服务中') ">下线请假</view>
                                    <view @tap.stop="pass(item,'允许接单')" class="gui-color-blue1"
                                        v-if="item.y_styles == '审核通过' && item.y_typs == '请假中'">上线工作</view>
                                            -->


									<!-- <view  @tap.stop="pass(item,0)" class="gui-color-blue1 gui-margin-left" v-if-else>删除
									</view> -->
								</view>

								<view class="gui-flex gui-space-between" v-if="!tag">

									<view @tap.stop="phone(item)" v-if="this.$store.state.base.yg_set.y_call"
										class="gui-color-blue1 gui-margin-left">电话联系</view>
								<view class="gui-flex" style="margin-left: auto;">
									    <view @tap.stop="pass(item,1)" 
									        class="gui-btn gui-bg-green gui-color-white gui-margin-right-sm"
									        style="padding:0 20rpx;border-radius:6rpx;"
									        v-if="item.y_styles == '待审核'">通过</view>
									    <view @tap.stop="pass(item,'jujue')" 
									        class="gui-btn gui-bg-red gui-color-white"
									        style="padding:0 20rpx;border-radius:6rpx;"
									        v-if="item.y_styles == '待审核'">拒绝</view>
									</view>

								</view>

							</view>

						</view>

					</view>

					<view class="gui-flex gui-column gui-space-between" v-if="tag==1">
						<view class="js-status gui-text-small gui-text-center gui-border-radius">可约</view>
						<view @tap="choose(item)"
							class="jis-select gui-bg-red gui-color-white gui-text-center gui-text gui-border-radius gui-margin-top"
							style="padding: 5rpx 16rpx;">选择TA</view>
					</view>

				</view>
			</view>
			<hyb-empty v-if="list.length ==0"></hyb-empty>
		</template>

	</hyb-page>
</template>

<script>
	export default {
		data() {
			return {
				xt_id: 0,
				fa_id: 0,
				tag: 0,
				list: [],
				page: 1,
				y_address: "",
				yg_list_title: this.$store.state.base.show_base.shifu_bie_ming + "列表",
				last_page: 1,
				juese: ''
			}
		},

		onReachBottom() {
			if (this.last_page > this.page) {
				this.page++;
				this.query();
			}
		},

		computed: {
			base: () => {
				return uni.storage.get("base")
			}
		},

		onLoad(options) {
			if (options.tag) {
				this.tag = options.tag;
			}

			if (options.fa_id) {
				this.fa_id = options.fa_id
			}


			if (options.xt_id) {
				this.xt_id = options.xt_id
			}

			if (options.juese) {
				this.juese = options.juese;
				this.yg_list_title = this.$store.state.base.show_base.shifu_bie_ming + '管理';
				if (this.base.show_base.sfgl) this.yg_list_title = this.base.show_base.sfgl;
			}
			this.query();
		},


		methods: {
			phone(jishi) {
				if (this.$store.state.base.yg_set && this.$store.state.base.yg_set.y_telphone_money > 0 && this.juese !=
					'manage' && this.juese != 'dl') {

					const money = this.$store.state.base.yg_set.y_telphone_money
					uni.gPost("yuangong/phone", {
						y_id: jishi.y_id
					}).then((flag) => {
						if (flag > 0) {
							uni.makePhoneCall({
								phoneNumber: jishi.y_telphone
							})
						} else {
							uni.showActionSheet({
								title: '需要支付' + money + '元费用后才能拨打电话!',
								itemList: ["余额支付", "微信支付"],
								success: (res2) => {
									uni.$pay.pay("pay/phone", {
										y_id: jishi.y_id,
										money: money
									}, res2.tapIndex).then(
										() => {
											uni.makePhoneCall({
												phoneNumber: jishi.y_telphone
											})
										})
								}
							})
						}
					})
				} else {
					uni.makePhoneCall({
						phoneNumber: jishi.y_telphone
					})
				}
			},
			fenleiChange(x, e) {
				this.xt_id = e.xt_id
				this.query(1)
			},

			call(item) {
				if (item.y_telphone) {
					uni.makePhoneCall({
						phoneNumber: item.y_telphone
					})
				} else {
					uni.showToast({
						title: "手机号为空",
						icon: "none"
					})
				}
			},

			pass(item, status) {
							let title = '';
							if (status == 0) {
								title = "确认删除?"
							} else if (status == '暂停接单') {
								title = "确定设为请假状态，暂停接单?";
							} else if (status == '允许接单') {
								title = "确定设为可接单状态？";
							} else if (status == 'jujue') {
								// 拒绝时需要输入原因
								uni.showModal({
									title: "请输入拒绝原因",
									editable: true,
									placeholderText: "请填写拒绝原因",
									confirmText: "确定拒绝",
									cancelText: "取消",
									success: (res) => {
										if (res.confirm && res.content) {
											uni.gPost("yuangong/audit", {
												y_id: item.y_id,
												status: status,
												shenhe_jujue: res.content // 添加拒绝原因参数
											}).then((res) => {
												this.query();
											})
										} else if (res.confirm && !res.content) {
											uni.showToast({
												title: "请填写拒绝原因",
												icon: "none"
											});
										}
									}
								});
								return; // 直接返回，不执行下面的通用弹窗
							} else {
								title = "确认审核通过?";
							}
			
							// 通用确认弹窗（用于非拒绝情况）
							uni.showModal({
								title: title,
								success: (res) => {
									if (res.confirm) {
										uni.gPost("yuangong/audit", {
											y_id: item.y_id,
											status: status,
										}).then((res) => {
											this.query();
										})
									}
								}
							})
						},

			choose(info) {
				uni.$emit("choose_jishi", {
					y_id: info.y_id,
					name: info.y_name,
					fw_count: info.fw_count,
					y_thumb: info.fw_count,
					distance: info.distance,
				})
				uni.navigateBack();
			},
			query(page) {
				if (page) this.page = page;
				if (this.page == 1) {
					this.list = [];
				}
				uni.gPost("yuangong/list", {
					xt_id: this.xt_id,
					fa_id: this.fa_id,
					location: uni.storage.get("location"),
					y_rz: 1,
					juese: this.juese,
					search: this.search,
					y_address: this.y_address,
					page: this.page,
					city: this.$store.state.city
				}).then((res) => {
					this.list = this.list.concat(res.data);
					this.last_page = res.last_page;
				})
			},

			to(id) {
				uni.navigateTo({
					url: "/hyb_o2o/jishi/info/info?id=" + id
				})
			}
		}
	}
</script>

<style>
	/* 自定义吸顶元素样式 */
	.js-icon {
		border-radius: 50%;
	}

	.js-status {
		border: 1rpx solid red;
		color: red;

	}
</style>